<div fxLayout fxLayoutAlign="start center" mat-dialog-title>
  <span fxFlex>
    {{packageBox?.code|translate}}
    — {{('PackageBoxType.' + packageBox?.type)|translate}}
    — {{packageBox?.creator.name}}
    — {{packageBox?.createDateTime|date:'yyyy-MM-dd HH:mm:ss'}}
  </span>

  <button color="warn" mat-dialog-close mat-icon-button tabindex="-1" type="button">
    <mat-icon>close</mat-icon>
  </button>
</div>

<mat-dialog-content fxLayout="column">
  <mat-divider></mat-divider>
  <main class="fill" fxFill fxLayout>

    <section class="left" fxFlex="200px" fxLayout="column">
      <mat-list dense>
        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="batchNo"></span>
            <span>{{packageBox?.batch.batchNo}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="grade"></span>
            <span>{{packageBox?.grade.name}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="silkCount"></span>
            <span>{{packageBox?.silkCount}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="netWeight"></span>
            <span>{{packageBox?.netWeight|number:'.3-3'}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="grossWeight"></span>
            <span>{{packageBox?.grossWeight|number:'.3-3'}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="PackageBox.budat"></span>
            <span>{{packageBox?.budat|date:'yyyy-MM-dd'}} / {{packageBox?.budatClass?.name}}</span>
            <!--            <span [matTooltip]="packageBox?.budatClass?.name">{{packageBox?.budat|date:'yyyy-MM-dd'}}</span>-->
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="PackageBox.sapT001l"></span>
            <span>{{packageBox?.sapT001l?.lgort}} / {{('SaleType.' + packageBox?.saleType)|translate}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="palletType"></span>
            <span>{{packageBox?.palletType}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="PackageBox.packageType"></span>
            <span>{{packageBox?.packageType}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="foamType"></span>
            <span>{{packageBox?.foamType}}</span>
          </div>
        </mat-list-item>

        <mat-list-item>
          <div fxLayout fxLayoutAlign="space-between center" matLine>
            <span translate="foamNum"></span>
            <span>{{packageBox?.foamNum}}</span>
          </div>
        </mat-list-item>
      </mat-list>
    </section>

    <mat-divider vertical></mat-divider>

    <section class="right" fxFlex>
      <ng-container *ngIf="packageBox?.type==='AUTO'||packageBox?.type==='BIG_SILK_CAR'">
        <mat-table [dataSource]="silks$">
          <ng-container matColumnDef="code">
            <mat-header-cell *matHeaderCellDef>{{'Silk.code'|translate}}({{(silks$|async)?.length}})</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.code}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="spec">
            <mat-header-cell *matHeaderCellDef>{{'Silk.spec'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">
              {{row.lineMachine.line.name}}-{{row.spindle}}/{{row.lineMachine.item}}
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingNum">
            <mat-header-cell *matHeaderCellDef>{{'doffingNum'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.doffingNum}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingType">
            <mat-header-cell *matHeaderCellDef>{{'doffingType'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{('DoffingType.' + row.doffingType)|translate}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingOperator">
            <mat-header-cell *matHeaderCellDef>{{'doffingOperator'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.doffingOperator.name}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingDateTime">
            <mat-header-cell *matHeaderCellDef>{{'doffingDateTime'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.doffingDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </ng-container>

      <ng-container *ngIf="packageBox?.type==='MANUAL'">
        <mat-table [dataSource]="silkCarRecords$">
          <ng-container matColumnDef="code">
            <mat-header-cell *matHeaderCellDef>{{'SilkCar.code'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.silkCar.code}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingType">
            <mat-header-cell *matHeaderCellDef>{{'doffingType'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{('DoffingType.' + row?.doffingType)|translate}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingOperator">
            <mat-header-cell *matHeaderCellDef>{{'doffingOperator'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row?.doffingOperator.name}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="doffingDateTime">
            <mat-header-cell *matHeaderCellDef>{{'doffingDateTime'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row">{{row?.doffingDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="btns">
            <mat-header-cell *matHeaderCellDef>{{'Common.detail'|translate}}</mat-header-cell>
            <mat-cell *matCellDef="let row" matRipple>
              <a [queryParams]="routerLinkCarRecordQueryParams(row)" [routerLink]="routerLinkCarRecord(row)" tabindex="-1" target="_blank">
                <mat-icon>link</mat-icon>
              </a>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </ng-container>
    </section>

  </main>
</mat-dialog-content>
